<template>
  <view class="page">
    <view v-if="cityShow" class="cityList">
      <view class="cityItem" :class="{ actCity: item.name == citySel }" v-for="(item, index) in ctiyList" :key="index" @click="setCity(item.id, item.name)">
        {{ item.name }}
      </view>
    </view>
    <view class="header">
      <view class="align-center">
        <view class="areaTxt" @click="openCity()">{{ citySel }}</view>
        <image class="downImg" @click="openCity()" src="/static/index/down.png" />
        <view @click="$to('/pages/searchList/index')" class="searchIpt">
          <uni-icons type="search" color="#86909C" size="20" style="z-index: 10; display: block"></uni-icons>
        </view>
      </view>
    </view>
    <view class="centreBox">
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular class="swiperItem">
        <swiper-item v-for="(item, index) in swiperList" :key="index" @click="openLink(item)">
          <image :src="item.image" class="slide-image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>

      <view class="mask" v-show="isMaskVisible" @click="cityShow = isMaskVisible = false">
        <!-- 这里可以添加遮罩层上的内容，比如加载图标或提示文本 -->
      </view>

      <view class="noticeBox">
        <uni-notice-bar :speed="20" showIcon background-color="white" scrollable single :text="messageList" style="height: 40rpx; margin-top: -12rpx; background: white"></uni-notice-bar>
      </view>

      <view class="justify-between align-center mt20">
        <view class="cateList">
          <view class="cateItem" :class="{ cateItemAct: isActiveIndex == item.id }" v-for="(item, index) in categoryList" :key="index" @click="toggleClass(item.id)">
            {{ item.name }}
          </view>
        </view>
        <image @click="$to('/pages/cateList/index')" class="moreCate" src="../../static/img/allCate.png" />
      </view>

      <goodItem v-if="articleList.length > 0" :list.sync="articleList"></goodItem>

      <view class="noneData" v-if="articleList.length == 0"></view>
    </view>

    <view class="forbidden" v-if="accountDisable"></view>
    <tabbar :index="1"></tabbar>
  </view>
</template>

<script>
import goodItem from '@/components/goodItem'
import tabbar from '@/components/tabbar.vue'

export default {
  data() {
    return {
      userInfo: {},
      cityShow: false,
      isActiveIndex: 0, // 初始时没有激活的元素
      citySel: '全部',
      isMaskVisible: false,
      ctiyList: [],
      swiperList: [],
      categoryList: [],
      messageList: '',
      content: '',
      constants: {},
      articleList: [],
      broadcastStyle: {
        speed: 5, //每秒3个字
        font_size: '20', //字体大小(rpx)
        text_color: 'rgba(51, 51, 51, 1)', //字体颜色
        back_color: 'white' //背景色
      },
      area_id: '',
      category_id: '',
      total: 0,
      page: 1,
      accountDisable: false
    }
  },
  onLoad() {
    this.init()
  },
  components: {
    tabbar,
    goodItem
  },
  onPullDownRefresh() {
    this.init()
  },
  onShow() {
    uni.hideTabBar()
    this.category_id = ''
    const categoryId = uni.getStorageSync('categoryId')
    if (categoryId) {
      this.category_id = categoryId
      this.isActiveIndex = categoryId
      uni.removeStorageSync('categoryId')
      this.getArticleList()
    }
    setTimeout(() => {
      this.$http({
        url: 'getUserInfo'
      })
        .then(res => {
          if (!res.data || !res.data.myself) {
            return this.AppLogin()
          }
          this.$db.setUser(res.data.myself)
          this.userInfo = res.data.myself
        })
        .catch(err => {
          if (err.msg == '该账号已经被禁用') {
            this.accountDisable = true
          }
          // this.$db.clear()
        })
    }, 200)
  },
  onReachBottom(e) {
    if (this.articleList.length < this.total) {
      this.page++
      this.getArticleList(true)
    }
  },
  methods: {
    AppLogin() {
      var uniMPModule = uni.requireNativePlugin('HGUniMPModule')
      uniMPModule.getAppLocationInfoCallback(res => {
        const address = res && JSON.parse(res)
        uni.setStorageSync('wxAdd', address)
      })
      uniMPModule.getUserInfo(
        {
          needlogin: '1'
        },
        res => {
          const user = JSON.parse(res)
          let username = user.member_name || user.username
          let obj = {
            userid: user.userid,
            username,
            userTokenKey: user.userTokenKey,
            telephone: user.telephone
          }
          this.$http({
            url: 'login',
            data: {
              ...obj
            }
          })
            .then(res => {
              this.$db.setUser(res.data)
              this.$db.setToken(res.data.token)
            })
            .catch(err => {
              this.$db.clear()
            })
        }
      )
    },
    openLink(item) {
      if (item.outlink.includes('/pages')) {
        return uni.navigateTo({
          url: item.outlink
        })
      } else {
        var uniMPModule = uni.requireNativePlugin('HGUniMPModule')
        return uniMPModule.navigateTo({
          uri: item.outlink
        })
      }
    },
    getData() {
      this.$http({ url: 'getAreaList' }).then(res => {
        this.ctiyList = res.data.city
        this.swiperList = res.data.banner
        this.categoryList = res.data.category
        this.ctiyList.unshift({
          name: '全部',
          id: ''
        })
        this.categoryList.unshift({
          name: '全部',
          id: ''
        })
        this.isActiveIndex = this.categoryList[0].id
        this.messageList = res.data.message
      })
    },
    async init() {
      await this.getData()
      await this.getArticleList()

      uni.stopPullDownRefresh()
    },
    toggleClass(index) {
      this.category_id = index
      this.isActiveIndex = index
      this.getArticleList()
    },
    getArticleList(type) {
      if (!type) {
        this.articleList = []
      }
      let data = {
        area_id: this.area_id,
        category_id: this.category_id,
        content: this.content,
        page: this.page
      }
      if (this.category_id == 9991) {
        let address = uni.getStorageSync('wxAdd')
        let latitude = address.latitude
        let longitude = address.longitude
        data.lon = longitude
        data.lat = latitude
      }
      this.$http({
        url: 'getArticleList',
        method: 'GET',
        data
      }).then(res => {
        this.total = res.data.total
        let arr = res.data.data.map(el => {
          let arr = el.url.split(',')
          arr.some(item => {
            if (!item.endsWith('.mp4')) {
              el.thumb_image = item
              return true
            }
            if (arr.length == 1 && item.endsWith('.mp4')) {
              el.thumb_image = el.url2
            }
          })

          return el
        })
        this.articleList.push(...arr)
      })
    },

    openCity() {
      this.cityShow = !this.cityShow
      this.isMaskVisible = !this.isMaskVisible
    },

    setCity(id, name) {
      this.cityShow = false
      this.isMaskVisible = false
      this.citySel = name
      this.area_id = id
      this.getArticleList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../common/common.css';
.forbidden {
  height: 100vh;
  width: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
}

.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 100%;
  overflow: scroll;
  // padding-top: var(--status-bar-height);
  padding-bottom: 100px;
}
.header {
  width: 100%;
  background: #fff;
  padding: 20rpx;
}

.areaTxt {
  font-weight: 600;
  font-size: 17px;
  color: #000000;
  margin-right: 5px;
}

.searchIpt {
  width: 75%;
  height: 30px;
  background: #f5f5f5;
  border-radius: 15px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.centreBox {
  padding: 20rpx;

  .swiperItem {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    height: 150px;
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 99; /* 确保遮罩层在其他内容之上 */
  display: flex;
  justify-content: center;
  align-items: center; /* 用于垂直和水平居中遮罩层上的内容 */
}

.noticeBox {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  margin-top: 20rpx;
  padding: 18rpx 20rpx 16rpx 20rpx;
  height: 50rpx;
}
.cityList {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  padding-top: var(--status-bar-height);

  box-sizing: border-box;
  justify-content: space-between;
  .cityItem {
    margin: 10px 0;
    width: 105px;
    height: 46px;
    background: #fafafa;
    border-radius: 23px;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 46px;
    text-align: center;
  }
  .actCity {
    color: #fe373c;
    background: #fff2f3;
  }
}

.cateList {
  width: 90%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  align-items: center;
}

.cateItem {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  text-align: left;
  white-space: nowrap;
  margin: 4rpx 40rpx 0 0rpx;
  font-size: 15px;
}
.cateItemAct {
  position: relative; /* 允许伪元素相对于这个容器定位 */
  color: rgba(153, 153, 153, 1);
  font-size: 20px;
  text-align: left;
  width: auto;
  color: #111111;
  font-weight: 600;
  margin: 4rpx 40rpx 0 0rpx;
  box-sizing: border-box; /* 使内边距包含在容器的总宽度内 */
  z-index: 2;
}

.cateItemAct::after {
  content: ''; /* 添加内容（在这里为空）以创建伪元素 */
  position: absolute; /* 绝对定位伪元素 */
  left: 4rpx; /* 从左边开始，设置伪元素的起始位置 */
  bottom: 2rpx;
  width: 80%; /* 设置伪元素的宽度，即底部边框的长度 */
  height: 7px; /* 设置伪元素的高度，即底部边框的厚度 */
  background: url('../../static/img/dot.png') no-repeat center;
  background-size: 100% 100%;
  z-index: 1;
}

.moreCate {
  width: 28rpx;
  height: 28rpx;
  display: block;
}

/* 设定不同高度 */

.downImg {
  width: 22rpx;
  height: 14rpx;
  display: block;
}

.capsule {
  width: 60px;
  background: #5f5f5f;
  // opacity: 0.6;
  height: 30px;
  border-radius: 20px;
  position: fixed;
  top: calc(var(--status-bar-height) + 15px);
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  .left {
    width: 20px;
    height: 20px;
    display: block;
    margin-right: 5px;
  }
  .right {
    width: 20px;
    height: 20px;
    display: block;
  }
}
</style>
